import { SharedModule } from './../../../shared.module';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MdIconRegistry, MaterialModule } from '@angular/material';
import { Component, OnDestroy, Input, Output, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export class LoadMaskService{
    private loadMsk: LoadMask;
    static Current = new LoadMaskService();
    Regist(loadMsk: LoadMask){
        this.loadMsk = loadMsk;
    }
    show(){
        if(this.loadMsk){
            this.loadMsk.loading = true;
        }
    }
    hide(){
        if(this.loadMsk){
            this.loadMsk.loading = false;
        }
    }
}

@Component({
    selector: 'div[load-mask]',
    template: `
        <div class="load-mask" *ngIf="loading">
            <div class="load-mask-content text-s" fxLayout="row" fxLayoutAlign="center center">
                <div fxLayout="row" fxLayoutAlign="center center" class="color-primary rotate-infinite load-mask-icon">
                    <span class="i-camera text-l"></span>
                </div>
                <span class="padding-5">加载中...</span>
            </div>
        </div>
    `,
    viewProviders: [MdIconRegistry]
})
export class LoadMask{
    constructor(){
        LoadMaskService.Current.Regist(this);
    }
    loading: boolean =  false;
}

@NgModule({
    imports: [CommonModule, FormsModule, SharedModule, MaterialModule],
    declarations: [LoadMask],
    exports: [LoadMask],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class LoadMaskModule{}